<template>
  <el-card class="box-card">
    <div class="row header">
      <img src="@/assets/machine.png" width="100%" height="120" alt="良率">
    </div>
    <div class="content">
      <div v-for="(item,index) in formData" :key="index" class="row">
        <span class="label">{{ item.name }}</span>
        <span :class="item.highlight ? 'value' : ''">{{ item.value }}</span>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  props: {
    type: {
      type: Number,
      default: 1
    },
    data: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      testingColor: '#8EBE47',
      holdColor: '#DBD62F',
      idleColor: '#D5665C',
      formData: [],
      fromTest: [
        {
          name: '实时良率：',
          value: this.data.realYield,
          highlight: true
        },
        {
          name: '实时OEE：',
          value: this.data.realOEE,
          highlight: true
        },
        {
          name: '实时UPH：',
          value: this.data.realUPH,
          highlight: true
        },
        {
          name: '当前测试总量：',
          value: this.data.testTotal,
          highlight: true
        }
      ],
      fromHold: [
        {
          name: '异常：',
          value: this.data.exception,
          highlight: true
        },
        {
          name: 'HOLD时长：',
          value: this.data.holdDuration,
          highlight: true
        },
        {
          name: '此前良率：',
          value: this.data.beforeYield
        },
        {
          name: '此前OEE：',
          value: this.data.beforeOEE
        },
        {
          name: '此前UPH：',
          value: this.data.beforeUPH
        },
        {
          name: '此前测试总量：',
          value: this.data.beforeTestTotal
        }
      ],
      fromIDLE: [
        {
          name: '上次的测试结束时间：',
          value: this.data.lastTestEndTime
        },
        {
          name: '历史良率：',
          value: this.data.hisYield
        },
        {
          name: '历史OEE：',
          value: this.data.hisOEE
        },
        {
          name: '历史UPH：',
          value: this.data.hisUPH
        }
      ]
    }
  },
  watch: {
    type: function(newVal, oldVal) {
      if (newVal === 1) {
        this.formData = this.fromTest
      } else if (newVal === 2) {
        this.formData = this.fromHold
      } else if (newVal === 3) {
        this.formData = this.fromIDLE
      }
    }
    // data: {
    //   handler: function(newVal, oldVal) {
    //     debugger
    //     if (this.type === 1) {
    //       for (let x = 0; x < this.fromTest.length; x++) {
    //         const idata = this.fromTest[x]
    //         if (x === 0) {
    //           idata.value = newVal.realYield
    //         } else if (x === 1) {
    //           idata.value = newVal.realOEE
    //         } else if (x === 2) {
    //           idata.value = newVal.realUPD
    //         } else if (x === 3) {
    //           idata.value = newVal.testTotal
    //         }
    //       }

    //       this.formData = this.fromTest
    //     } else if (this.type === 2) {
    //       for (let index = 0; index < this.fromHold.length; index++) {
    //         const idata = this.fromTest[index]
    //         if (index === 0) {
    //           idata.value = newVal.exception
    //         } else if (index === 1) {
    //           idata.value = newVal.holdDuration
    //         } else if (index === 2) {
    //           idata.value = newVal.beforeYield
    //         } else if (index === 3) {
    //           idata.value = newVal.beforeOEE
    //         } else if (index === 4) {
    //           idata.value = newVal.beforeUPD
    //         } else if (index === 5) {
    //           idata.value = newVal.beforeTestTotal
    //         }
    //       }
    //       this.formData = this.fromHold
    //     } else if (this.type === 3) {
    //       for (let z = 0; z < this.fromIDLE.length; z++) {
    //         const idata = this.fromTest[z]
    //         if (z === 0) {
    //           idata.value = newVal.lastTestEndTime
    //         } else if (z === 1) {
    //           idata.value = newVal.hisYield
    //         } else if (z === 2) {
    //           idata.value = newVal.hisOEE
    //         } else if (z === 3) {
    //           idata.value = newVal.hisUPH
    //         }
    //       }
    //       this.formData = this.fromIDLE
    //     }
    //   },
    //   deep: true
    // }
    // data: function(newVal, oldVal) {
    //   if (this.type === 1) {
    //     for (let x = 0; x < this.fromTest.length; x++) {
    //       const idata = this.fromTest[x]
    //       if (x === 0) {
    //         idata.value = newVal.realYield
    //       } else if (x === 1) {
    //         idata.value = newVal.realOEE
    //       } else if (x === 2) {
    //         idata.value = newVal.realUPD
    //       } else if (x === 3) {
    //         idata.value = newVal.testTotal
    //       }
    //     }

    //     this.formData = this.fromTest
    //   } else if (this.type === 2) {
    //     for (let index = 0; index < this.fromHold.length; index++) {
    //       const idata = this.fromTest[index]
    //       if (index === 0) {
    //         idata.value = newVal.exception
    //       } else if (index === 1) {
    //         idata.value = newVal.holdDuration
    //       } else if (index === 2) {
    //         idata.value = newVal.beforeYield
    //       } else if (index === 3) {
    //         idata.value = newVal.beforeOEE
    //       } else if (index === 4) {
    //         idata.value = newVal.beforeUPD
    //       } else if (index === 5) {
    //         idata.value = newVal.beforeTestTotal
    //       }
    //     }
    //     this.formData = this.fromHold
    //   } else if (this.type === 3) {
    //     for (let z = 0; z < this.fromIDLE.length; z++) {
    //       const idata = this.fromTest[z]
    //       if (z === 0) {
    //         idata.value = newVal.lastTestEndTime
    //       } else if (z === 1) {
    //         idata.value = newVal.hisYield
    //       } else if (z === 2) {
    //         idata.value = newVal.hisOEE
    //       } else if (z === 3) {
    //         idata.value = newVal.hisUPD
    //       }
    //     }
    //     this.formData = this.fromIDLE
    //   }
    // },
  },
  mounted() {
    if (this.type === 1) {
      for (let x = 0; x < this.fromTest.length; x++) {
        const idata = this.fromTest[x]
        if (x === 0) {
          idata.value = this.data.realYield
        } else if (x === 1) {
          idata.value = this.data.realOEE
        } else if (x === 2) {
          idata.value = this.data.realUPH
        } else if (x === 3) {
          idata.value = this.data.testTotal
        }
      }
      this.formData = this.fromTest
    } else if (this.type === 2) {
      for (let index = 0; index < this.fromHold.length; index++) {
        const idata = this.fromHold[index]
        if (index === 0) {
          idata.value = this.data.exception
        } else if (index === 1) {
          idata.value = this.data.holdDuration
        } else if (index === 2) {
          idata.value = this.data.beforeYield
        } else if (index === 3) {
          idata.value = this.data.beforeOEE
        } else if (index === 4) {
          idata.value = this.data.beforeUPH
        } else if (index === 5) {
          idata.value = this.data.beforeTestTotal
        }
      }
      this.formData = this.fromHold
    } else if (this.type === 3) {
      for (let z = 0; z < this.fromIDLE.length; z++) {
        const idata = this.fromIDLE[z]
        if (z === 0) {
          idata.value = this.data.lastTestEndTime
        } else if (z === 1) {
          idata.value = this.data.hisYield
        } else if (z === 2) {
          idata.value = this.data.hisOEE
        } else if (z === 3) {
          idata.value = this.data.hisUPH
        }
      }
      this.formData = this.fromIDLE
    }
  }
}
</script>

<style lang="scss"  scoped>
.box-card{
  // padding: 10px;
    // width: 25%;
    margin:10px 10px;
}
.row{
  margin: 10px 10px;
  color: #9D9999;
}
.header{
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 20px;
    .title{
        font-size: 20px;
        color: black;
        font-weight: 700;
    }
}
.content{
     margin-bottom: 10px;
     .label{

     }
     .value{
        color: black;
        font-weight: 600;
     }
}

.identification{
float: right;
  margin-bottom: 10px;
  .point-item{
    display: flex;
    margin-right: 10px;
    margin-bottom: 10px;
    .point{
      width: 10px;
      height: 10px;
      border-radius: 5px;
      margin-right: 5px;
      background-color: #409EFF;
    }
    .text{
      font-size: 12px;
    }
  }
}
</style>
